<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>背景</title>
	<style>
		.box1{
			width:500px;
			height:500px;

			background-color:#bfa;
			
			/*
				background-image:设置背景图片
			*/
			background-image:url("./img/q1.png");

			/*
				background-repeat:设置背景的重复方式
					可选值
					repeat:默认值，沿x ，y轴重复
					repeat-x
					repeat-y
					no-repeat
			*/
			background-repeat:no-repeat;

			/*
			background-position:设置背景图片的位置
					可选值
						top left right bottom ceter
			*/
			background-position:0 0;
			

			/*
				background-clip:设置背景的范围
				可选值：
				border-box 默认值，背景会出现在边框的下边
				padding-box 背景不会出现在边框，只出现在内容区和内边距
				content-box 背景值出现在内容区
						
			*/
			background-clip:border-box;


			/*
				background-origin:设置背景的原点
					padding-box:默认值,background-position内边距开始计算
					content-box
					border-box
			*/
			background-origin:padding-box;

			background-size:300px 300px;


			border:3px red solid;
		}
	</style>
</head>
<body>
	<div class="box1">

	</div>
</body>
</html>